<template>
  <el-table
    :data="props.subTableData"
    @header-click="changeCellStatusNull"
    :cell-class-name="cellClassName"
    @cell-click="cellClick"
  >
    <!-- 序号 -->
    <el-table-column
      align="center"
      type="index"
      label="序号"
      width="60"
      fiexd="left"
    ></el-table-column>
    <template v-for="(item, key) in props.subTableList" :key="key">
      <template v-if="item.jsonFiled">
        <template v-for="(json, index) in item.jsonFiled" :key="index">
          <template v-if="json.showInForm">
            <el-table-column
              :label="json.label"
              :width="json.width"
              min-width="200"
            >
              <template #default="scope">
                <template v-if="!isCurrentCell(scope)">
                  {{ scope.row[item.filedName][json.filedName] }}
                </template>
                <template v-else>
                  <component
                    :is="formItemList[json.formType]"
                    v-model="scope.row[item.filedName][json.filedName]"
                    v-bind="getCtrlMeta(json)"
                  ></component>
                </template>
              </template>
            </el-table-column>
          </template>
        </template>
      </template>
      <template v-else>
        <template v-if="item.showInForm">
          <el-table-column
            :label="item.label"
            :width="item.width"
            min-width="200"
          >
            <template #default="scope">
              <template v-if="!isCurrentCell(scope)">
                {{ scope.row[item.filedName] }}
              </template>
              <template v-else>
                <component
                  :is="formItemList[item.formType]"
                  v-model="scope.row[item.filedName]"
                  v-bind="getCtrlMeta(item)"
                ></component>
              </template>
            </template>
          </el-table-column>
        </template>
      </template>
    </template>
    <el-table-column
      align="center"
      label="操作"
      fixed="right"
      fit
      width="80"
      min-width="60"
    >
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          icon="delete"
          @click="deleteRowSub(scope.$index)"
          >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Scope } from "@/components/table/receipt/ReceiptTable.vue";
import { ElMessageBox } from "element-plus/es";
import { FormFiled } from "@/components/form/basic/BaseForm.vue";
import { formItemList } from "@/components/form/formItem/MapElFormItem";

export interface SubTableProps {
  subTableList: Array<FormFiled>;
  subTableData: Array<Record<string, unknown>>;
}

const props = withDefaults(defineProps<SubTableProps>(), {
  subTableList: () => {
    return [];
  },
  subTableData: () => {
    return [];
  },
});

const emits = defineEmits<{
  (e: "delete-row-sub", index: number): void;
}>();
// 当前选中的单元格的信息.
const currentCell = ref({ rowIndex: 0, label: "no" });

/**
 * 为单元格设置行号
 * @param row 单元格所在的行
 * @param rowIndex 行号
 */
const cellClassName = ({
  row,
  rowIndex,
}: Record<string, Record<string, unknown>>) => {
  row.index = rowIndex;
};

// 将当前选中的单元格置空.
const changeCellStatusNull = () => {
  currentCell.value = { rowIndex: 0, label: "no" };
};
/**
 * 改变当前选中的单元格
 * @param newValue 新点击的单元格
 */
const changeCurrentCell = (newValue: { rowIndex: number; label: string }) => {
  currentCell.value = newValue;
};

/**
 * 该是否是当前选中的单元格
 * @param data 某个单元格的信息
 */
const isEqualCurrentCell = (data: { rowIndex: number; label: string }) => {
  return (
    currentCell.value.rowIndex === data.rowIndex &&
    currentCell.value.label === data.label
  );
};

/**
 * 遍历所有单元格，判断当前点击的单元格是哪个。
 * @param scope 每个单元格的属性
 */
const isCurrentCell = (scope: Scope) => {
  if (scope.row !== {} && scope.column !== {}) {
    const cell = { rowIndex: scope.$index, label: scope.column.label } as {
      rowIndex: number;
      label: string;
    };
    return isEqualCurrentCell(cell);
  } else {
    return false;
  }
};
const getCtrlMeta = (item: FormFiled) => {
  return item.meta || {};
};
/**
 * 点击单元格时触发的事件
 * @param row 点击的单元格所在的行
 * @param column 点击的单元格所在的列
 */
const cellClick = (
  row: Record<string, never>,
  column: Record<string, never>
) => {
  changeCurrentCell({ rowIndex: row.index, label: column.label });
};
const deleteRowSub = (index: number) => {
  ElMessageBox.confirm("确认删除本行记录吗？", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      emits("delete-row-sub", index);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
